<template>
    <div class="swiper">
        <el-carousel :interval="4000" type="card" height="300px" pause-on-hover arrow="always">
            <el-carousel-item v-for="item in carouseData" :key="item">
                <img class="img" :src="getImgUrl(item.url)" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
const getImgUrl = (name) => {
    return new URL(`../../assets/image/${name}`, import.meta.url).href
}
const carouseData = [
    { url: "sw01.jpg" },
    { url: "sw02.jpg" },
    { url: "sw03.jpg" },
]
</script>

<style lang="less" scoped>
.swiper {
    height: 574px;
    background-image: url('../../assets/image/1.png');
    background-size: 100% 574px;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
        width: 100%;
        height: 100%;
    }

    .el-carousel--horizontal {
        width: 70%;
    }

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    /deep/ .el-carousel__indicators {
        // 指示器
        left: unset;
        transform: unset;
        right: 2%;
    }

    /deep/ .el-carousel__button {
        // 指示器按钮
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 50%;
        background-color: #333;
    }

    /deep/ .is-active .el-carousel__button {
        // 指示器激活按钮
        background: #fff;
    }

    /deep/ .el-carousel__arrow--left {
        height: 80px;
        width: 80px;
    }

    /deep/.el-carousel__arrow--right {
        height: 80px;
        width: 80px;
    }

    //调整走马灯箭头-左箭头
    ::v-deep .el-carousel__arrow--left {
        font-size: 40px;
        color: #fff;
    }

    //右箭头
    ::v-deep .el-carousel__arrow--right {
        font-size: 40px;
        color: #fff;
    }
}
</style>
